<template>
	<view class="container">
		<view class="header">订单详情</view>
		<view class="message-list">
			<!-- 支付状态 -->
			<view class="payment-status">支付成功，请确保扫码门店二维码消费</view>
			
			<!-- 店铺信息 -->
			<view class="shop-info">
				<image src="/static/whb/商家.png" class="shop-icon"></image>
				<view class="shop-detail">
					<view class="shop-name">伟业汽车美容店（人民路店）</view>
					<view class="shop-address">山东省人民中路33号</view>
				</view>
				<image src="/static/whb/plane@3x.png" class="nav-icon" @click="navigateToNavigation"></image>
			</view>

			<!-- 订单详情 -->
			<view class="order-details">
				<view class="detail-section">
					<view class="section-title">订单详情</view>
					<view class="detail-item">
						<text class="item-label">车辆清洗</text>
						<text class="item-value">¥ 39.90</text>
					</view>
					<view class="detail-item">
						<text class="item-label">车辆额加服用</text>
						<text class="item-value">0</text>
					</view>
					<view class="detail-item total">
						<text class="item-label">原价</text>
						<text class="item-value">¥ 59.90</text>
					</view>
					<view class="detail-item discount">
						<text class="item-label">店家优惠</text>
						<text class="item-value red">-¥ 20</text>
					</view>
					<view class="detail-item discount">
						<text class="item-label">优惠券</text>
						<text class="item-value red">-¥ 10</text>
					</view>
					<view class="detail-item payment">
						<text class="item-label">支付金额</text>
						<text class="item-value green">¥ 29.9</text>
					</view>
				</view>

				<!-- 订单信息 -->
				<view class="order-info">
					<view class="info-title">订单信息</view>
					<view class="info-item">
						<text class="info-label">订单号：</text>
						<text class="info-value">121212112487878</text>
					</view>
					<view class="info-item">
						<text class="info-label">下单时间：</text>
						<text class="info-value">2023.03.13 17:40</text>
					</view>
					<view class="info-item">
						<text class="info-label">预约时间：</text>
						<text class="info-value">2023.03.18 13:40</text>
					</view>
					<view class="info-item">
						<text class="info-label">车辆：</text>
						<text class="info-value">奔驰FWE4/鲁A588FHJ</text>
					</view>
					<view class="info-item">
						<text class="info-label">备注：</text>
						<text class="info-value"></text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
const navigateToNavigation = () => {
	uni.navigateTo({
		url: '/pages/whb/05-navigation/05-navigation'
	});
};
</script>

<style>
	.container {
		height: 200px;
		background-color: #007AFF;
	}

	.status-text {
		color: white;
		text-align: center;
		font-size: 14px;
		padding: 15px 0 5px;
		opacity: 0.9;
	}

	.header {
		text-align: center;
		color: white;
		padding-top: 5px;
		padding-bottom: 15px;
		font-size: 20px;
	}

	.back-icon,
	.share-icon {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.icon {
		font-size: 40rpx;
	}

	.message-list {
		background-color: white;
		margin: 0 30rpx;
		border-radius: 20rpx;
		padding: 30rpx;
	}

	.payment-status {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
		padding: 20rpx 0;
		border-bottom: 2rpx solid #f5f5f5;
	}

	.shop-info {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 2rpx solid #f5f5f5;
	}

	.shop-icon,
	.nav-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.shop-detail {
		flex: 1;
		margin: 0 20rpx;
	}

	.shop-name {
		font-size: 32rpx;
		color: #333;
		margin-bottom: 10rpx;
	}

	.shop-address {
		font-size: 28rpx;
		color: #666;
	}

	.order-details {
		padding: 20rpx 0;
	}

	.detail-section {
		border-bottom: 20rpx solid #f5f5f5;
		padding-bottom: 20rpx;
	}

	.section-title {
		font-size: 32rpx;
		color: #333;
		padding: 10rpx 0 20rpx;
		font-weight: bold;
	}

	.detail-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15rpx 0;
		font-size: 28rpx;
		color: #333;
	}

	.total {
		padding-top: 20rpx;
		border-top: 2rpx solid #f5f5f5;
	}

	.red {
		color: #ff4d4f;
	}

	.green {
		color: #52c41a;
	}

	.order-info {
		padding: 30rpx 0;
	}

	.info-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.info-item {
		display: flex;
		padding: 10rpx 0;
		font-size: 28rpx;
		color: #666;
	}

	.info-label {
		width: 160rpx;
	}

	.info-value {
		flex: 1;
		color: #333;
	}
</style>